<template>
  <div>
    <el-tree
    ref="tree"
    default-expand-all
    node-key="id"
    show-checkbox
    check-strictly
    :data="list"
    :props="{label:'name'}"
    />
    <div class="margin-top: 20px text-align: right">
  <el-button type="primary" @click="hSubmit">确定</el-button>
  <el-button>取消</el-button>
</div>
    </div>
</template>

<script>
import { getPermissionList } from "@/api/permission"
import { tranListToTreeList } from "@/utils/index"
import { getRolesDetail,assignPrem } from "@/api/settings";
export default {
  props:{
    roleId:{
      type:String,
      required:true
    }
  },
data() {
  return {
    list:[]
  }
},
created() {
  this.loadPermissionList()
},
methods: {
  async hSubmit(){
     try {
      const permIds = this.$refs.tree.getCheckedKeys()
      const res = await assignPrem({id:this.roleId,permIds:permIds})
      console.log(res,'assignPrem')
      this.$emit('success')
     } catch (error) {
      console.log(error,'assignPrem')
     }
  },
  async loadPermissionList() {
     try {
      const res = await getPermissionList()
      console.log(res,'getPermissionList')
      const perIds = await getRolesDetail(this.roleId)
      console.log(perIds,'getRolesDetail')
      this.$refs.tree.setCheckedKeys(perIds.data.permIds)
      this.list = tranListToTreeList(res.data)
     } catch (error) {
      console.log(error,'getPermissionList2');
     }
  }
},
}
</script>

<style>

</style>